<template>
  <section class="component module-permission">
    <div class="row">
      <div class="resource-tree">
        <common-title title="菜单资源"></common-title>
        <resource-tree
          v-model="checkedMenuIds"
          ref="resource-tree"
          :cureentKey.sync="currentTreeKey"
        ></resource-tree>
      </div>
      <div class="col-span">
        <common-title title="按钮资源"></common-title>
        <resource-control
          v-model="controlCheckedIds"
          :currentTreeId="currentTreeKey"
          @check-tree-node="onCheckTreeNodeChange"
        ></resource-control>
      </div>
    </div>
    <div class="operate-buttons">
      <el-button @click="emitClose">取消</el-button>
      <el-button @click="saveModule">保存</el-button>
    </div>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import { Tree } from "element-ui";
import Component from "vue-class-component";
import DataForm from "~/components/common/data-form.vue";
import DataBox from "~/components/common/data-box.vue";
import { Dependencies } from "~/core/decorator";
import { RoleService } from "~/services/management-service/role.service";
// import { ResourceService } from "~/services/domain-service/resource.service";
import { CommonService } from "~/utils/common.service";
import { Emit, Watch, Prop } from "vue-property-decorator";
import { Getter, State } from "vuex-class";
import ResourceTree from "./resource-tree.vue"
import ResourceControl from "./resource-control.vue"
import CommonTitle from "~/components/common/common-title.vue"

@Component({
  components: {
    ResourceTree,
    ResourceControl,
    CommonTitle
  }
})
export default class ModulePermission extends Vue {
  // @Dependencies(ResourceService) private resourceService: ResourceService;
  @Dependencies(RoleService) private roleService: RoleService;

  private checkedMenuIds: string[] = []
  private controlCheckedIds: string[] = []
  private controlDataSet: any[] = []
  private currentTreeKey: string = ""
  private loading: any = { state: false }

  @Prop({ required: true })
  private roleId: string

  @Prop({ required: true })
  private roleName: string

  @Watch('roleId', { immediate: true })
  private async onRoleIdChange(val) {
    if (!val) return
    this.roleService.getSelfResources(this.roleId).subscribe((roleResource) => {
      this.checkedMenuIds = roleResource.filter(x => x.type === 'MENU').map(v => v.id)
      console.log(this.checkedMenuIds,'checkedMenuIds')
      this.controlDataSet = roleResource.filter(x => x.type === 'CONTROL')
      this.controlCheckedIds = this.controlDataSet.map(v => v.id)
    })
  }

  @Watch('checkedMenuIds')
  private onCheckedMenuIdsChange(values: number[], oldVlaues: number[]) {
    const oldCheckedControls = [...this.controlCheckedIds]
    // 处理增加的
    const addKeys = values.filter(x => !oldVlaues.includes(x))
    addKeys.forEach(v => {
      const controls = this.controlDataSet.filter(x => x.parent === v).map(v => v.id)
      oldCheckedControls.push(...controls)
    })
    const checkedControlSet = new Set(oldCheckedControls)
    // 处理减少的
    const deleteKeys = oldVlaues.filter(x => !values.includes(x))
    deleteKeys.forEach(v => {
      const controls = this.controlDataSet.filter(x => x.parent === v).map(v => v.id)
      controls.forEach(c => checkedControlSet.delete(c))
    })
    this.controlCheckedIds = Array.from(checkedControlSet)
    const oldCurrentTreeKey = this.currentTreeKey
    this.currentTreeKey = ""
    this.$nextTick(() => {
      this.currentTreeKey = oldCurrentTreeKey
    })
  }

  @Emit('close')
  private emitClose() { }

  private onCheckTreeNodeChange() {
    if (this.checkedMenuIds.includes(this.currentTreeKey)) return
    this.checkedMenuIds.push(this.currentTreeKey)
  }

  private saveModule() {
    const treeresource: any = this.$refs['resource-tree']
    const checkedResults = [...treeresource.getCheckedNodes(), ...this.controlCheckedIds]
    const roleInfo = {
      roleId: this.roleId,
      resourceIds: checkedResults

    }
    this.roleService.roleAttachResource(roleInfo).subscribe(
      data => {
        this.$message.success("操作成功!");
        this.emitClose();
      })
  }

}
</script>

<style lang="less" scoped>
.component.module-permission {
  .resource-tree {
    flex-basis: 250px;
  }
  .common-title {
    background-color: #e4e4e4;
  }
}
</style>

